﻿<template>
    <div id="_soso">
        <div class="layui-row layui-col-space15 clearfix">
            <div class="layui-col-md4">
                <div class="layui-row layui-col-space10">
                    <div class="layui-col-sm6 layui-col-md12 padding0">
                        <div class="article-category shadow">
                            <div v-for="item in diclist">
                                <div class="article-category-title">{{item.Title}}</div>
                                <div class="layui-btn-container">
                                    <button v-for="it in item.children" v-on:click="open(it)"  class="layui-btn layui-btn-primary">{{it.Title}}</button>
                                  
                                </div>

                                <!--<a v-for="it in item.children" :href="'#/open/'+it.ID">{{it.Title}}</a>-->


                            </div>
                            <div class="clear"></div>
                        </div>
                    </div>
   
                    <!--右边悬浮 平板或手机设备显示-->
                    <div class="category-toggle"><i class="fa fa-chevron-left"></i></div>
                </div>
        </div>
        <!--左边文章列表-->
        <div class="layui-col-md8">

            <div class="left-box">
                <p class="left-box-title shadow"><i class="fa fa-sun-o fa-spin" aria-hidden="true"></i>开放文档</p>

                <div class="article shadow clearfix sr-listshow" v-for="item in news">
                    <div class="article-left">
                        <div style="width:100%;height:100%; margin: 0 auto;text-align:center">
                            <i :class="'fa '+item.Pic+' fa-5x'" :alt="item.Title" v-bind:style="{color:SetColor(item)}"></i>
                        </div>
                
                    </div>
                    <div class="article-right">
                        <div class="article-title">
                            <a :href="'#/newsDetail/'+item.ID">{{item.Title}}</a>
                        </div>
                        <div class="article-abstract">
                            {{item.Title}}
                        </div>
                        <div class="article-footer">
                            <span class="layui-hide-xs"><i class="fa fa-tag" aria-hidden="true"></i>&nbsp;<a style="color:#009688"  href="javascript:;"></a></span>
                            <span><i class="fa fa-clock-o" aria-hidden="true"></i>{{item.Adddate}}</span>
                            <span class="article-viewinfo">{{item.views}}阅读</span>
                            <!--<span class="article-viewinfo">1评论</span>
                <span class="article-viewinfo">6赞</span>-->
                            <a class="read layui-btn layui-btn-xs layui-btn-normal layui-hide-xs" :href="'#/newsDetail/'+item.ID" :title=" item.Title">阅读全文</a>
                        </div>
                    </div>
                    <div class="flag flag-left">推荐</div>
                </div>

                <div class="blog-pagebox">
                    <div id="newspage">

                    </div>
                </div>
            </div>
        </div>

    </div>


    </div>

</template>
<script>
    layui.use(['layer', 'form', 'common', 'laypage', 'element'], function () {
        document.title = "日常视频|王者荣耀|自学天才|爱上歆随懿恫|asxsyd92.com";
        $ = layui.$; closemuen(); var common = layui.common, element = layui.element, page = 0, limit = 15, laypage = layui.laypage, carousel = layui.carousel;;

        console.log(11);
        module.exports = {
            name: "_soso",
            data() {
                return {
                    data: [],
                    news: [],
                    diclist: [],
                }
            }, mounted: function () {
                m = this;
                m.ajax();
            }, watch: {
                '$route'(to, from) {
            
            
                    m.ajax();
                    $('body,html').animate({ scrollTop: 0 }, 500);
                }
            },
            methods: {

                ajax: function () {
              
             
                     var lay = layer.msg('正在拼命加载...', { icon: 16, shade: 0.5, time: 20000000 });
                    var type = this.$route.params.type;
                    if (type == null || type == ""||type==":type") { type = "268627fd-54ef-47da-b407-7e5088232bdf"; }
                    fetch("/api/Article/GetNew?type="+type+"&page=" + 1 + "&limit=15").then((data) => data.text()).then((data) => {
                        var my = JSON.parse(data);
                        layer.close(lay);
                        setTimeout(function () {

                            $('body,html').animate({ scrollTop: 0 }, 500);
                            gongdong();
                        }, 100);
                        //执行一个laypage实例
                        laypage.render({
                            elem: 'newspage' //注意，这里的 test1 是 ID，不用加 # 号
                            , count: my.count //数据总数，从服务端得到
                            , jump: function (obj, first) {

                                page = obj.curr;  //改变当前页码
                                limit = obj.limit;
                                //首次不执行
                                if (!first) {
                                    //do something
                                    fetch("/api/Article/GetNew?type="+type+"&page=" + page + "&limit=" + limit).then((data) => data.text()).then((data) => {
                                        var my = JSON.parse(data);
                                        m.news = my.data;
                                        setTimeout(function () {

                                            $('body,html').animate({ scrollTop: 0 }, 500);
                                            gongdong();
                                        }, 100);
                                    });
                                }
                            }
                        });
                        this.news = my.data;
                    });
                    if (this.diclist.length <= 0) {
                    fetch("/api/ApiData/GetByCode?code=newstypetow&tab=Dictionary").then((data) => data.text()).then((data) => {
                        var my = JSON.parse(data);
                        this.diclist = my.data;
                         setTimeout(function () {
                             element.render();
                            gongdong();
                        }, 100);
                        layer.close(lay);
                    })
                    } 
                


                }
                , play: function (_this) {
                    // `this` 在方法里指向当前 Vue 实例
                    console.log(_this);
                    var shiping = 'https://v.qq.com/iframe/player.html?vid=' + _this.vid + '&tiny=0&auto=0'
                    if (/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent)) { //移动端
                        layer.open({
                            type: 2,
                            title: false,
                            shade: 0.8,
                            shadeClose: true,
                            content: shiping
                        });
                    } else {
                        layer.open({
                            type: 2,
                            title: false,
                            area: ['80%', '80%'],
                            shade: 0.8,
                            shadeClose: true,
                            content: shiping
                        });
                    }
                }
                , update: function () {
                    fetch("/api/Article/GetTent?title=&page=" + 1 + "&limit=10").then((data) => data.text()).then((data) => {
                        this.ajax();

                    })

                }, SetColor: function (_this) {
              
                if (_this.TitleColor === null || _this.TitleColor === undefined) {
                    return "#009688";
                } else return _this.TitleColor;

                }, open: function (_this) {
                    window.location.href = '#/open/' + _this.ID;
                }
            },
            created() {

                closemuen();
                setTimeout(function () {
    $(".category-toggle").click(function (e) {
                        e.stopPropagation();
                        openlife()
                    });
                    function openlife() {
                        $(".category-toggle").addClass("layui-hide");
                        $(".article-category").unbind("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend");
                        $(".article-category").removeClass("categoryOut");
                        $(".article-category").addClass("categoryIn");
                        $(".article-category").addClass("layui-show")
                    }
                    function loselife() {
                        $(".article-category").on("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend",
                            function () {
                                $(".article-category").removeClass("layui-show");
                                $(".category-toggle").removeClass("layui-hide")
                            });
                        $(".article-category").removeClass("categoryIn");
                        $(".article-category").addClass("categoryOut")
                    }
                    $(".blog-body,.blog-footer").click(function () {
                        loselife();
                    });
                    $(".article-category").click(function () {
                        loselife();
                    });
                }, 200)
                  
            }
        }
        function gongdong() {

            /msie[6 | 7 | 8 | 9]/i.test(navigator.userAgent) || (window.sr = new ScrollReveal({
                reset: !1
            }), sr.reveal(".sr-left", {
                origin: "left",
                scale: 1,
                opacity: .1,
                duration: 1200
            }), sr.reveal(".sr-bottom", {
                scale: 1,
                opacity: .1,
                distance: "60px",
                duration: 1e3
            }), sr.reveal(".sr-listshow", {
                distance: "30px",
                duration: 1e3,
                scale: 1,
                opacity: .1
            }), sr.reveal(".sr-rightmodule", {
                origin: "top",
                distance: "60px",
                duration: 1e3,
                scale: 1,
                opacity: .1
            }));
            layer.photos({
                photos: ".article-left",
                anim: 5
            });
            layer.photos({
                photos: ".article-detail-content",
                anim: 5,
                move: !1
            })

        }
    })
</script>
